<script lang="ts" setup name="user">
import { ref, reactive, onMounted } from "vue";
import { Message } from "@arco-design/web-vue";
import ProForm from "@/components/ProFrom";
import ProTable from "@/components/ProTable";
import { queryFormMap, editFormMap } from "./config/form";
import { columns } from "./config/table";
import { get } from "@/api/http";

const queryForm = reactive({});

const scroll = {} || { x: 2000, y: 0 };

const table = reactive({
  data: [],
});

/*----查询
---------------------------*/
const queryFormRef = ref();

const handleQuery = () => {
  console.log(queryForm);
  if (!queryFormRef.value.verify()) return;
  updateTable();
};
onMounted(() => handleQuery());

/*----表格
---------------------------*/

async function updateTable() {
  table.data = await get("/local/table/list");
}

const handleRemove = ({ id }: any) => {
  get("/local/table/list").then(() => handleQuery());
};

/*----业务弹框
---------------------------*/
const editFormRef = ref();
const modal = reactive({
  open: false,
  title: "新增",
  form: {} as any,
});

const handleEdit = (row?: any) => {
  // console.log(row);
  modal.title = row?.name ? "编辑" : "新增";
  modal.open = true;
  modal.form = row || {};
};

const handleSubmit = (done?: Function) => {
  if (editFormRef.value.verify()) return;
  Message.success("提交成功");
  done && done();
  return false;
};
</script>

<template>
  <a-card :bordered="false">
    <!-- 查询表单 -->
    <ProForm
      ref="queryFormRef"
      layout="inline"
      :mapping="queryFormMap"
      :model-value="queryForm"
      :defaultCol="8"
      @submit="handleQuery()"
    >
      <ProButton
        text="重置"
        icon="refresh"
        @click="queryFormRef.reset() && handleQuery()"
      />
      <ProButton
        text="查询"
        icon="search"
        type="primary"
        @click="handleQuery()"
      />
    </ProForm>
  </a-card>

  <!-- 中间留白 -->
  <div class="bg-light-500 w-full h-15px"></div>

  <a-card :bordered="false">
    <a-space class="justify-end m-b-20px" fill>
      <!-- 表格上方按钮组 -->
      <ProButton text="新增" icon="plus" type="primary" @click="handleEdit()" />
    </a-space>

    <!-- 表格 -->
    <ProTable
      :data="table.data"
      :columns="columns"
      :scroll="scroll"
      :extraBtns="1"
      :operate="{ 编辑: handleEdit, 删除: '/local/user' }"
      @update="handleQuery()"
    >
      <template #default="{ record }">
        <ProButton
          text="查看"
          icon="icon-eye"
          type="primary"
          status="success"
          @click="handleRemove(record)"
        />
      </template>
    </ProTable>
  </a-card>

  <!-- 弹出框 -->
  <a-modal
    v-model:visible="modal.open"
    :title="modal.title"
    @cancel="modal.open = false"
    @before-ok="handleSubmit"
    :mask-closable="false"
  >
    <ProForm
      ref="editFormRef"
      class="p-20px"
      layout="vertical"
      :mapping="editFormMap"
      :model-value="modal.form"
      :defaultCol="24"
      @submit="handleSubmit()"
    />
  </a-modal>
</template>

<style lang="less" scoped></style>
